import { Select, Input } from 'antd';
import styles from './style.module.scss';
import { ChangeEvent, useEffect, useMemo, useState } from 'react';

const CONST_FULLDAY = 'FullDay';
const CONST_TIMEPEROID = 'TimeRange';
const CONST_OTHER = '其他';

const DataOptions = [
    { label: '全天', value: CONST_FULLDAY },
    { label: '分时段', value: CONST_TIMEPEROID },
    { label: '其他', value: CONST_OTHER },
];

const optionValueKeys = [CONST_FULLDAY, CONST_TIMEPEROID,CONST_OTHER];

const foramtHour = (val: number) => {
    return val.toString().padStart(2, '0');
}
const VisisteDateTime = ({ value, onChange }: { value: string, onChange: (value?: string) => void }) => {
    const [ displayValue, setDisplayValue ] = useState<string|undefined>(value);
    const [ valueData, setValueData ] = useState(value || '');
    const [ startTime1, setStartTime1 ] = useState<string>();
    const [ endTime1, setEndTime1 ] = useState<string>(); 
    const [ startTime2, setStartTime2 ] = useState<string>();
    const [ endTime2, setEndTime2 ] = useState<string>();

    const startTimeList = useMemo(() => {
        return ','.repeat(16).split(",").map((_, index) =>({
            label: `${foramtHour(index + 7)}:00`,
            value: `${foramtHour(index + 7)}:00`
        }));
    }, []);

     const startTimeListMorning = useMemo(() => {
        return ','.repeat(5).split(",").map((_, index) =>({
            label: `${foramtHour(index + 7)}:00`,
            value: `${foramtHour(index + 7)}:00`
        }));
    }, []);
    const startTimeListAfternoon = useMemo(() => {
        return ','.repeat(10).split(",").map((_, index) =>({
            label: `${foramtHour(index + 13)}:00`,
            value: `${foramtHour(index + 13)}:00`
        }));
    }, []);

    const endTimeList1 = useMemo(() => {
        const startHour = parseInt((startTime1 || "0").replace(/:00$/,""));
        return startTimeList.filter((item) => {
            const hour = parseInt(item.value.replace(/:00$/,""));
            return hour > startHour;
        })
    }, [startTimeList, startTime1]);

    const endTimeList1Morning = useMemo(() => {
        const startHour = parseInt((startTime1 || "0").replace(/:00$/,""));
        return startTimeListMorning.filter((item) => {
            const hour = parseInt(item.value.replace(/:00$/,""));
            return hour > startHour;
        })
    }, [startTimeListMorning, startTime1]);

     const endTimeList2 = useMemo(() => {
        const startHour = parseInt((startTime2 || "0").replace(/:00$/,""));
        return startTimeListAfternoon.filter((item) => {
            const hour = parseInt(item.value.replace(/:00$/,""));
            return hour > startHour;
        })
    }, [startTimeListAfternoon, startTime2])

    const optionValue = useMemo(() => {
        return optionValueKeys.includes(valueData) ? valueData : null;
    }, [valueData]);

    const [ updateInputValue, setInputValue ] = useState(() => optionValueKeys.includes(value) ?  "" : value);

    useEffect(() => {
        typeof onChange === "function" && onChange(displayValue);
    }, [ displayValue])

    return (<><div className={styles.visisteDateTime}>
        <section className={styles.visisteDateTimeSelect}>
            <Select
                options={DataOptions}
                placeholder="请选择时间段"
                value={optionValue}
                onChange={(value) => {
                    const inputValue = optionValueKeys.includes(value) ? value : "";
                    setValueData(value);
                    setInputValue(inputValue);
                    setStartTime1(undefined);
                    setEndTime1(undefined);
                    setStartTime2(undefined);
                    setEndTime2(undefined);
                    setDisplayValue(undefined)
                    typeof onChange === "function" && onChange(undefined);
                }}
            />
        </section>
        { optionValue === CONST_FULLDAY && <section className={styles.visisteDateTimeInput}>
                <div className={styles.visisteDateTimeField}><Select placeholder="请选择开始时间" options={startTimeList} value={startTime1} onChange={(value) => {
                    setStartTime1(value);
                    setEndTime1(undefined);
                    setDisplayValue(undefined)
                }} /></div>
                { startTime1 && startTime1.length > 0 && <div className={styles.visisteDateTimeField}><Select placeholder="请选择终止时间" options={endTimeList1} value={endTime1} 
                    onChange={(value) => {
                        setEndTime1(value);
                        setDisplayValue(`全天 ${startTime1}-${value}`);
                    }}
                /></div>}
            </section>
        }
        
         { optionValue===CONST_OTHER && <section className={styles.visisteDateTimeInput}>
            <Input type="text" placeholder="请输入时间段"
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setDisplayValue(event.target.value);
                typeof onChange === "function" && onChange(event.target.value);
            }} />
        </section> }
    </div>
    { optionValue === CONST_TIMEPEROID && <>
        <div className={styles.visisteDateTimePeriod}>
                <label>上午： </label>
                <section className={styles.visisteDateTimeInput}>
                    <div className={styles.visisteDateTimeField}><Select placeholder="请选择开始时间" options={startTimeListMorning} value={startTime1} onChange={(value) => {
                        setStartTime1(value);
                        setEndTime1(undefined);
                        if(startTime2 && endTime2) {
                            setDisplayValue(`下午 ${startTime2}-${endTime2}`);
                        } else {
                            setDisplayValue(undefined);
                        }
                        
                    }} /></div>
                    { startTime1 && startTime1.length > 0 && <div className={styles.visisteDateTimeField}><Select placeholder="请选择终止时间" options={endTimeList1Morning} value={endTime1} 
                        onChange={(value) => {
                            setEndTime1(value);
                            if(startTime2 && endTime2) {
                                setDisplayValue(`上午 ${startTime1}-${value}, 下午 ${startTime2}-${endTime2}`);
                            } else {
                                setDisplayValue(`上午 ${startTime1}-${value}`);
                            }
                        }}
                    /></div>}
                </section>
        </div>
        <div className={styles.visisteDateTimePeriod}>
                <label>下午： </label>
                <section className={styles.visisteDateTimeInput}>
                    <div className={styles.visisteDateTimeField}><Select placeholder="请选择开始时间" options={startTimeListAfternoon} value={startTime2} onChange={(value) => {
                        setStartTime2(value);
                        setEndTime2(undefined);
                        if(startTime1 && endTime1) {
                            setDisplayValue(`上午 ${startTime1}-${endTime1}`);
                        } else {
                            setDisplayValue(undefined);
                        }
                    }} /></div>
                    { startTime2 && startTime2.length > 0 && <div className={styles.visisteDateTimeField}><Select placeholder="请选择终止时间" options={endTimeList2} value={endTime2} 
                        onChange={(value) => {
                            setEndTime2(value);
                            if(startTime1 && endTime1) {
                                setDisplayValue(`上午 ${startTime1}-${endTime1}, 下午 ${startTime2}-${value}`);
                            } else {
                                setDisplayValue(`下午 ${startTime2}-${value}`);
                            }
                        }}
                    /></div>}
                </section>
        </div>
        </>
    }
    { optionValue!==CONST_OTHER && <label style={{ display: "block", padding: "5px 0"}}>参观时间：{displayValue}</label> }
    </>)
}

export default VisisteDateTime;
